<template>
  <div class="point-detect">
    <div class="point-list">
      <div
        class="point-btn"
        :class="isActive === index ? 'active' : ''"
        v-for="(item, index) in pointBtnList"
        :key="index"
        @click="popupActive(index)"
      >
        <div :class="'img' + index"></div>
        <span>{{ item }}</span>
      </div>
    </div>
    <div v-show="this.switchJudgment === 0">
      <div class="ycmj">
        <div class="firstFloor">
          <div class="Text2">
            <div class="Zds">
              <div>站点数</div>
              <div>{{ this.YcList.siteNum }}</div>
            </div>
            <div class="Ycjls">
              <div>遥测记录数</div>
              <div>{{ this.YcList.recordNum }}</div>
            </div>
            <div class="Ycjgsl">
              <div>遥测告警数量</div>
              <div>{{ this.YcList.alarmNum }}</div>
            </div>
          </div>
        </div>
        <div class="Qxfb">区县分布</div>
        <div class="county">
          <div class="pieChart">
            <img src="@/assets/image/yuanhuan.png" alt="" />
          </div>
          <div class="district">
            <div class="first">
              <div class="HP" style="color: #626b89">
                <span class="HP1" style="background-color: #06e6f2"></span
                >和平区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.HP
                }}</span>
              </div>
              <div class="HD" style="color: #626b89">
                <span class="HD1" style="background-color: #0748f3"></span
                >河东区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.HD
                }}</span>
              </div>
              <div class="HX" style="color: #626b89">
                <span class="HX1" style="background-color: #3206f2"></span
                >河西区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.HX
                }}</span>
              </div>
            </div>
            <div class="second">
              <div class="NK" style="color: #626b89">
                <span class="NK1" style="background-color: #da07f2"></span
                >南开区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.NK
                }}</span>
              </div>
              <div class="HB" style="color: #626b89">
                <span class="HB1" style="background-color: #01a2a9"></span
                >河北区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.HB
                }}</span>
              </div>
              <div class="HQ" style="color: #626b89">
                <span class="HQ1" style="background-color: #026eac"></span
                >红桥区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.HQ
                }}</span>
              </div>
            </div>
            <div class="third">
              <div class="DL" style="color: #626b89">
                <span class="DL1" style="background-color: #1702aa"></span
                >东丽区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.DL
                }}</span>
              </div>
              <div class="XQ" style="color: #626b89">
                <span class="XQ1" style="background-color: #6e02aa"></span
                >西青区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.XQ
                }}</span>
              </div>
              <div class="JN" style="color: #626b89">
                <span class="JN1" style="background-color: #024b4f"></span
                >津南区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.JN
                }}</span>
              </div>
            </div>
            <div class="fourth">
              <div class="WQ" style="color: #626b89">
                <span class="WQ1" style="background-color: #4bd963"></span
                >武清区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.WQ
                }}</span>
              </div>
              <div class="BD" style="color: #626b89">
                <span class="BD1" style="background-color: #fe3b2f"></span
                >宝坻区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.BD
                }}</span>
              </div>
              <div class="BHXQ" style="color: #626b89">
                <span class="BHXQ1" style="background-color: #fe9500"></span
                >滨海新区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.BHXQ
                }}</span>
              </div>
            </div>
            <div class="fifth">
              <div class="NH" style="color: #626b89">
                <span class="NH1" style="background-color: #2e5e63"></span
                >宁河区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.NH
                }}</span>
              </div>
              <div class="JH" style="color: #626b89">
                <span class="JH1" style="background-color: #5ac6fb"></span
                >静海区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.JH
                }}</span>
              </div>
              <div class="JZ" style="color: #626b89">
                <span class="JZ1" style="background-color: #5855d5"></span
                >蓟州区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.JZ
                }}</span>
              </div>
            </div>
            <div class="sixth">
              <div class="BC" style="color: #626b89">
                <span class="BC1" style="background-color: #552f62"></span
                >北辰区:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.BC
                }}</span>
              </div>
              <div class="SJ" style="color: #626b89">
                <span class="SJ1" style="background-color: #07eaf3"></span>市局:
                <span style="color: white; font-family: atilla">{{
                  this.YcList.SJ
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="drgzdclphs">当日各站点车辆排名数</div>
        <div class="histogram">
          <div class="wenZi">
            <div class="one">
              <div class="XYD"></div>
              <div class="WZ" style="color: #adb4bd; font-size: 18px">排名</div>
            </div>
            <div class="two">
              <div class="XYD"></div>
              <div class="WZ" style="color: #adb4bd; font-size: 18px">
                站点名称
              </div>
            </div>
            <div class="three">
              <div class="XYD"></div>
              <div class="WZ" style="color: #adb4bd; font-size: 18px">
                车辆数
              </div>
            </div>
          </div>
          <div class="shuJu" v-for="(item, key) in ranks" :key="key">
            <div class="xuHao">Top{{ key + 1 }}</div>
            <el-tooltip
              :content="item.name"
              placement="top"
              effect="dark"
              popper-class="atooltip"
            >
              <span class="zdmc">{{ item.name }}</span>
            </el-tooltip>
            <div class="JDT">
              <el-progress
                :percentage="percentage(ranks[0].value, item.value)"
                :type="pro1.type"
                :stroke-width="pro1.strokeWidth"
                :color="pro1.color"
                :show-text="false"
              >
              </el-progress>
            </div>
            <div class="cls">
              <div class="shuLiang">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="this.switchJudgment === 1">
      <div class="modle">
        <div class="firstModle">
          <div class="Text2">
            <div class="Stmj">
              <div>实体门禁</div>
              <div>{{ this.MjList.enterpriseNum }}</div>
            </div>
            <div class="Xjwl">
              <div>虚机围栏</div>
              <div>{{ this.MjList.dynamicFenceNum }}</div>
            </div>
            <div class="Jls">
              <div>记录数</div>
              <div>{{ this.MjList.recordNum }}</div>
            </div>
            <div class="Gjsl">
              <div>告警数量</div>
              <div>{{ this.MjList.alarmNum }}</div>
            </div>
          </div>
        </div>
        <div class="Qxfb">区县分布</div>
        <div class="county">
          <div class="pieChart">
            <img src="@/assets/image/yuanhuan.png" alt="" />
          </div>
          <div class="district">
            <div class="first">
              <div class="HP" style="color: #626b89">
                <span class="HP1" style="background-color: #06e6f2"></span>和平区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.HP
                }}</span>
              </div>
              <div class="HD" style="color: #626b89">
                <span class="HD1" style="background-color: #0748f3"></span
                >河东区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.HD
                }}</span>
              </div>
              <div class="HX" style="color: #626b89">
                <span class="HX1" style="background-color: #3206f2"></span
                >河西区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.HX
                }}</span>
              </div>
            </div>
            <div class="second">
              <div class="NK" style="color: #626b89">
                <span class="NK1" style="background-color: #da07f2"></span
                >南开区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.NK
                }}</span>
              </div>
              <div class="HB" style="color: #626b89">
                <span class="HB1" style="background-color: #01a2a9"></span
                >河北区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.HB
                }}</span>
              </div>
              <div class="HQ" style="color: #626b89">
                <span class="HQ1" style="background-color: #026eac"></span
                >红桥区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.HQ
                }}</span>
              </div>
            </div>
            <div class="third">
              <div class="DL" style="color: #626b89">
                <span class="DL1" style="background-color: #1702aa"></span
                >东丽区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.DL
                }}</span>
              </div>
              <div class="XQ" style="color: #626b89">
                <span class="XQ1" style="background-color: #6e02aa"></span
                >西青区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.XQ
                }}</span>
              </div>
              <div class="JN" style="color: #626b89">
                <span class="JN1" style="background-color: #024b4f"></span
                >津南区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.JN
                }}</span>
              </div>
            </div>
            <div class="fourth">
              <div class="WQ" style="color: #626b89">
                <span class="WQ1" style="background-color: #4bd963"></span
                >武清区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.WQ
                }}</span>
              </div>
              <div class="BD" style="color: #626b89">
                <span class="BD1" style="background-color: #fe3b2f"></span
                >宝坻区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.BD
                }}</span>
              </div>
              <div class="BHXQ" style="color: #626b89">
                <span class="BHXQ1" style="background-color: #fe9500"></span
                >滨海新区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.BHXQ
                }}</span>
              </div>
            </div>
            <div class="fifth">
              <div class="NH" style="color: #626b89">
                <span class="NH1" style="background-color: #2e5e63"></span
                >宁河区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.NH
                }}</span>
              </div>
              <div class="JH" style="color: #626b89">
                <span class="JH1" style="background-color: #5ac6fb"></span
                >静海区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.JH
                }}</span>
              </div>
              <div class="JZ" style="color: #626b89">
                <span class="JZ1" style="background-color: #5855d5"></span
                >蓟州区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.JZ
                }}</span>
              </div>
            </div>
            <div class="sixth">
              <div class="BC" style="color: #626b89">
                <span class="BC1" style="background-color: #552f62"></span
                >北辰区:
                <span style="color: white; font-family: atilla">{{
                  this.MjList.BC
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="stmj">实体门禁</div>
        <div class="entranceGuard">
          <div class="bigPieChart">
            <QiyePage :dataList="qySource"></QiyePage>
          </div>
          <div class="paiFang">
            <div class="list">
              <div class="item" v-for="(item, index) in qySource" :key="index">
                <div class="img"></div>
                <div class="item-data">
                  <span>{{ item.value }}</span>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMjLeftAnalysis, getYcLeftAnalysis } from "@/api/largescreen";
import { mapState, mapMutations } from "vuex";
import QiyePage from "@/components/Myecharts/QiyePage";
import Logo from "../../layout/components/Sidebar/Logo";
export default {
  name: "pointDetect",
  components: {
    // MyDialog
    QiyePage,
  },
  data() {
    return {
      qySource: [],
      TJRegions: {},
      ranks: [],
      pieunit1: "(吨)",
      MjList: {
        alarmNum: "",
        recordNum: "",
        enterpriseNum: "",
        dynamicFenceNum: "",
        HP:"",
        HD: "",
        HX: "",
        NK: "",
        HB: "",
        HQ: "",
        DL: "",
        XQ: "",
        JN: "",
        WQ: "",
        BD: "",
        BHXQ: "",
        NH: "",
        JH: "",
        JZ: "",
        BC: "",
        SJ: "",
        Gthree: "",
        Gfour: "",
        Gfive: "",
        Gsix: "",
      },
      YcList: {
        alarmNum: "",
        recordNum: "",
        siteNum: "",
        HP: "",
        HD: "",
        HX: "",
        NK: "",
        HB: "",
        HQ: "",
        DL: "",
        XQ: "",
        JN: "",
        WQ: "",
        BD: "",
        BHXQ: "",
        NH: "",
        JH: "",
        JZ: "",
        BC: "",
      },
      pointBtnList: ["遥测门站", "企业门禁"],
      isActive: 0,
      switchJudgment: 0,
      /*右侧侧进度条参数*/
      pro1: {
        type: "line",
        strokeWidth: 16,
        color: ["#1af5c4", "#05d3ff"],
      },
    };
  },
  computed: {
    ...mapState(["pointDetectionPage"]),
    PageIsActive() {
      return this.pointDetectionPage.isActive;
    },
  },
  watch: {
    PageIsActive: {
      immediate: true,
      deep: true,
      handler(newValue, old) {
        if (newValue === "遥测门站") {
          this.GetYcLeftAnalysis();
        } else {
          this.GetMjLeftAnalysis();
        }
      },
    },
  },
  methods: {
    ...mapMutations("pointDetectionPage", ["IS_ACTIVE"]),
    popupActive(e) {
      if (e !== this.isActive) {
        this.isActive = e;
        this.IS_ACTIVE(this.pointBtnList[e]);
      }
      if (e === 0) {
        this.switchJudgment = 0;
        // console.log(this.switchJudgment);
      } else if (e === 1) {
        this.switchJudgment = 1;
        // console.log(this.switchJudgment);
      }
    },
    /*遥测门站柱形*/
    percentage(a, b) {
      let num = b / a;
      if (num < 1) {
        return num.toFixed(2) * 100;
      } else {
        return num * 100;
      }
    },
    //企业门禁左侧收缩框
    GetMjLeftAnalysis(id) {
      let cId = "";
      id !== 120000 ? (cId = id) : (cId = "");
      getMjLeftAnalysis({ cId: cId })
        .then((res) => {
          let data = res.data;
          let Data = res.data;
          //  第一层数据
          this.MjList.alarmNum = Data.alarmNum;
          this.MjList.enterpriseNum = Data.enterpriseNum;
          this.MjList.dynamicFenceNum = Data.dynamicFenceNum;
          this.MjList.recordNum = Data.recordNum;
          // 第二层数据
          this.MjList.DL = data.countySites["东丽区"]?data.countySites["东丽区"] : 0;
          this.MjList.BC = data.countySites["北辰区"]?data.countySites["北辰区"] : 0;
          this.MjList.NH = data.countySites["宁河区"]?data.countySites["宁河区"] : 0;
          this.MjList.BD = data.countySites["宝坻区"]?data.countySites["宝坻区"] : 0;
          this.MjList.WQ = data.countySites["武清区"]?data.countySites["武清区"] : 0;
          this.MjList.JN = data.countySites["津南区"]?data.countySites["津南区"] : 0;
          this.MjList.BHXQ = data.countySites["滨海新区"]?data.countySites["滨海新区"] : 0;
          this.MjList.XQ = data.countySites["西青区"]?data.countySites["西青区"] : 0;
          this.MjList.JH = data.countySites["静海区"]?data.countySites["静海区"] : 0;
          this.MjList.NK = data.countySites["南开区"]?data.countySites["南开区"] : 0;
          this.MjList.HP = data.countySites["和平区"]?data.countySites["和平区"] : 0;
          this.MjList.HD = data.countySites["河东区"]?data.countySites["河东区"] : 0;
          this.MjList.HB = data.countySites["河北区"]?data.countySites["河北区"] : 0;
          this.MjList.HX = data.countySites["河西区"]?data.countySites["河西区"] : 0;
          this.MjList.JZ = data.countySites["蓟州区"]?data.countySites["蓟州区"] : 0;
          this.MjList.HQ = data.countySites["红桥区"]?data.countySites["红桥区"] : 0;
          // 第三层数据
          let a = res.data.standardEmissionNum;
          let arry = [];
          for (let k in a) {
            let obj = {};
            obj.name = k;
            obj.value = a[k];
            arry.push(obj);
          }
          this.qySource = arry;
        })
        .catch((err) => {});
    },
    //遥测门站左侧收缩框
    GetYcLeftAnalysis(id) {
      let cId = "";
      id !== 120000 ? (cId = id) : (cId = "");
      getYcLeftAnalysis({ cId: cId })
        .then((res) => {
          let data = res.data;
          let Data = res.data;
          //  第一层数据
          this.YcList.alarmNum = Data.alarmNum;
          this.YcList.recordNum = Data.recordNum;
          this.YcList.siteNum = Data.siteNum;
          // 第二层数据
          this.YcList.DL = data.countySites["东丽区"]?data.countySites["东丽区"] : 0;
          this.YcList.BC = data.countySites["北辰区"]?data.countySites["北辰区"] : 0;
          this.YcList.NH = data.countySites["宁河区"]?data.countySites["宁河区"] : 0;
          this.YcList.BD = data.countySites["宝坻区"]?data.countySites["宝坻区"] : 0;
          this.YcList.WQ = data.countySites["武清区"]?data.countySites["武清区"] : 0;
          this.YcList.JN = data.countySites["津南区"]?data.countySites["津南区"] : 0;
          this.YcList.BHXQ = data.countySites["滨海新区"]?data.countySites["滨海新区"] : 0;
          this.YcList.XQ = data.countySites["西青区"]?data.countySites["西青区"] : 0;
          this.YcList.JH = data.countySites["静海区"]?data.countySites["静海区"] : 0;
          this.YcList.NK = data.countySites["南开区"]?data.countySites["南开区"] : 0;
          this.YcList.HP = data.countySites["和平区"]?data.countySites["和平区"] : 0;
          this.YcList.HD = data.countySites["河东区"]?data.countySites["河东区"] : 0;
          this.YcList.HB = data.countySites["河北区"]?data.countySites["河北区"] : 0;
          this.YcList.HX = data.countySites["河西区"]?data.countySites["河西区"] : 0;
          this.YcList.JZ = data.countySites["蓟州区"]?data.countySites["蓟州区"] : 0;
          this.YcList.HQ = data.countySites["红桥区"]?data.countySites["红桥区"] : 0;
          this.YcList.SJ = data.countySites["市局"]?data.countySites["市局"] : 0;;
          // 第三层数据
          let a = res.data.siteVehicleNum;
          let b = [];
          for (let key in a) {
            b.push({
              name: key,
              value: a[key],
            });
          }
          b.sort(function (a, b) {
            return b.value - a.value;
          });
          let c = b.splice(0, 5);
          let tmp = {};
          this.ranks = c;
          this.TJRegions = tmp;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.point-detect {
  width: 100%;
  height: 100%;
  padding: 30px 0px 0px 50px;
  box-sizing: border-box;
  // background-color: #010d11;
  
  .point-list {
    width: 325px;
    height: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(
      0deg,
      rgba(55, 55, 74, 0.25) 0%,
      rgba(55, 55, 74, 0.25) 100%
    );
    border: solid 1px #f3e8e840;

    .point-btn {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-direction: column;
      cursor: pointer;
      color: #274fc9;

      div {
        width: 45px;
        height: 45px;
        background-size: contain;
      }

      span {
        font-size: 22px;
      }

      .img0 {
        background: url("~@/assets/image/gate-station.svg") no-repeat center
          center;
      }

      .img1 {
        background: url("~@/assets/image/access-control.svg") no-repeat center
          center;
      }
    }

    .active {
      color: #e0e6f9;

      .img0 {
        background: url("~@/assets/image/gate-station-active.svg") no-repeat
          center center;
      }

      .img1 {
        background: url("~@/assets/image/access-control-active.svg") no-repeat
          center center;
      }
    }
  }
}
@font-face {
  font-family: atilla;
  src: url("/components/MyLeftPage/ATILLA.ttf");
}
// 第一层
// 遥测门站整体样式
.ycmj {
  width: 100%;
  height: 900px;
  box-sizing: border-box;
}
.firstFloor {
  margin-top: 20px;
  height: 120px;
}
.Text1 {
  display: flex;
}
// 站点数样式
.Zds {
  width: 145px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
  box-sizing: border-box
}
.Zds > :first-child {
  margin-top: 12px;
  text-align: center;
  font-size: 17px;
  color: #05bfcb;
}
.Zds > :nth-child(2) {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 遥测记录数
.Ycjls {
  width: 145px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
  box-sizing: border-box
}
.Ycjls > :first-child {
  margin-top: 12px;
  text-align: center;
  font-size: 17px;
  color: #05bfcb;
}
.Ycjls > :nth-child(2) {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 遥测告警数量
.Ycjgsl {
  width: 145px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
  box-sizing: border-box
}
.Ycjgsl > :first-child {
  margin-top: 12px;
  text-align: center;
  font-size: 17px;
  color: #05bfcb;
}
.Ycjgsl > :nth-child(2) {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 当日各站点车辆排名数样式
.drgzdclphs {
  margin-left: 25px;
  margin-top: 70px;
  color: white;
  font-size: 20px;
}
// 柱状图第一排文字样式
.histogram {
  margin-top: 15px;
}
.wenZi {
  display: flex;
  margin-top: -5px;
}
.XYD {
  width: 7px;
  height: 7px;
  background: #fcf000;
  border-radius: 50%;
  margin-top: 9px;
}
.one,
.two {
  display: flex;
  margin-top: 5px;
  margin-left: 25px;
}
.three {
  display: flex;
  margin-top: 5px;
  margin-left: 250px;
}
.WZ {
  margin-left: 10px;
}

.shuJu {
  width: 100%;
  margin-top: 20px;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  &:nth-child(1) {
    .JDT {
      ::v-deep .el-progress-bar__inner {
        background: linear-gradient(90deg, #1af5c4 0%, #05d3ff 100%);
      }
    }
  }
  &:nth-child(2) {
    .JDT {
      ::v-deep .el-progress-bar__inner {
        background: linear-gradient(90deg, #0a68f8 0%, #06eaf3 100%);
      }
    }
  }
  &:nth-child(3) {
    .JDT {
      ::v-deep .el-progress-bar__inner {
        background: linear-gradient(90deg, #0438c9 0%, #7b06f3 100%);
      }
    }
  }
  &:nth-child(4) {
    .JDT {
      ::v-deep .el-progress-bar__inner {
        background: linear-gradient(90deg, #0bf8a2 0%, #05b3f2 100%);
      }
    }
  }
  .JDT {
    width: calc(100% - 230px);
    ::v-deep .el-progress-bar {
      width: 180px;
      padding-left: 30px;
      margin-top: 7px;
    }

    ::v-deep .el-progress-bar__outer {
      border-radius: 0px;
      background: url("~@/assets/image/pro-bg.png") repeat-x center;
      background-size: contain;
    }

    ::v-deep .el-progress-bar__inner {
      border: 1px solid #060f2b;
      box-sizing: border-box;
      border-radius: 0px;
      background: linear-gradient(90deg, #2d3e73 0%, #102c86 100%);
    }
  }
}
.xuHao {
  color: white;
  font-size: 18px;
  margin-left: 30px;
}
.zdmc {
  color: white;
  font-size: 18px;
  margin-left: 40px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.cls {
  color: white;
  font-size: 18px;
  margin-left: 20px;
  margin-top: 5px;
}
.shuLiang {
  margin-right: 45px;
}
// ----------------------------------------------------------
// 整体颜色
.modle {
  width: 100%;
  height: 900px;
  box-sizing: border-box
}
// 第一层
.firstModle {
  margin-top: 20px;
  height: 120px;
}
.Text2 {
  display: flex;
}
// 实体门禁样式
.Stmj {
  width: 105px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
  box-sizing: border-box
}
.Stmj > :first-child {
  margin-top: 12px;
  text-align: center;
  font-size: 17px;
  // font-weight: bold;
  color: #05bfcb;
}
.Stmj > :nth-child(2) {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 虚机围栏样式
.Xjwl {
  width: 105px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
 box-sizing: border-box
}
.Xjwl > :first-child {
  margin-top: 12px;
  text-align: center;
  font-size: 17px;
  // font-weight: bold;
  color: #05bfcb;
}
.Xjwl > :nth-child(2) {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 记录数样式
.Jls {
  width: 105px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
 box-sizing: border-box
}
.Jls > :first-child {
  margin-top: 12px;
  text-align: center;
  font-size: 17px;
  // font-weight: bold;
  color: #05bfcb;
}
.Jls > :nth-child(2) {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 告警数量样式
.Gjsl {
  width: 105px;
  height: 80px;
  margin-top: 20px;
  margin-left: 25px;
  box-sizing: border-box
}
.Gjsl > :first-child {
  margin-top: 12px;
  margin-left: 20px;
  font-size: 17px;
  // font-weight: bold;
  color: #05bfcb;
}
.Gjsl > :nth-child(2) {
  margin-top: 10px;
  margin-left: 25px;
  color: white;
  font-size: 20px;
  font-family: atilla;
}
// 区县分布样式
.Qxfb {
  margin-left: 25px;
  margin-top: 15px;
  color: white;
  font-size: 20px;
}
// 区县样式
.county {
  width: 100%;
  height: 200px;
  display: flex;
}
// 区县饼状图样式
.pieChart {
  margin-left: 25px;
  margin-top: 85px;
}
// 各区样式
.district {
  width: 440px;
  float: left;
  margin-left: 33px;
  margin-top: 20px;
}
.first,
.second,
.third,
.fourth,
.fifth,
.sixth {
  width: 440px;
  margin-top: 12px;
  float: left;
}
.HP,
.HD,
.HX,
.NK,
.HB,
.HQ,
.DL,
.XQ,
.JN,
.WQ,
.BD,
.BHXQ,
.NH,
.JH,
.JZ,
.BC,
.SJ {
  width: 30%;
  float: left;
  font-size: 18px;
}
.HP1,
.HD1,
.HX1,
.NK1,
.HB1,
.HQ1,
.DL1,
.XQ1,
.JN1,
.WQ1,
.BD1,
.BHXQ1,
.NH1,
.JH1,
.JZ1,
.BC1,
.SJ1 {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
// 实体门禁字体样式
.stmj {
  margin-left: 25px;
  margin-top: 65px;
  color: white;
  font-size: 20px;
}
// 实体门禁样式
.entranceGuard {
  width: 100%;
  display: flex;
}
// 实体门禁饼状图样式
.bigPieChart {
  width: 150px;
  height: 150px;
  margin-left: 10px;
  margin-top: 60px;
}
// 排放样式
.list {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 65px;
  margin-top: 50px;

  .item {
    box-sizing: border-box;
    padding: 0px 10px;
    width: 50%;
    height: 50px;
    display: flex;
    align-items: center;

    .img {
      width: 50px;
      height: 50px;
      margin-right: 20px;
      background-size: contain;
    }

    .item-data {
      flex: 1;
      height: 100%;
      span {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:nth-child(1) {
          font-size: 22px;
          color: #f0f6fb;
          line-height: 1;
          margin-bottom: 12px;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #7983a2;
          line-height: 1;
        }
      }
    }
    &:nth-child(1) {
      .img {
        background: url("~@/assets/image/guosan.png") no-repeat center center;
      }
    }
    &:nth-child(2) {
      .img {
        background: url("~@/assets/image/guosi.png") no-repeat center center;
      }
    }
    &:nth-child(3) {
      .img {
        background: url("~@/assets/image/guowu.png") no-repeat center center;
      }
    }
    &:nth-child(4) {
      .img {
        background: url("~@/assets/image/guoliu.png") no-repeat center center;
      }
    }
  }
}
</style>